<!DOCTYPE html>
<html>
	<head>
		<title>资源分配</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
		<style type="text/css">
			.el-header {
				/*background-color: #B3C0D1;*/
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<el-container style="height: 600px; border: 1px solid #eee">
					<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
						<el-menu :default-openeds="[]" default-active="0">
							<el-submenu :index="item.menu_id+ ''" v-for="item in menuList" :key="item.menu_id">
								<template slot="title"><span>{{ item.menu_name }}</span></template>
								<el-menu-item @click.native="select(subItem.menu_id)" :index="subItem.menu_id + ''" v-for="subItem in item.children" :key="subItem.menu_id">
									<span slot="title">{{ subItem.menu_name }}</span>
          						</el-menu-item>
							</el-submenu>
						</el-menu>
					</el-aside>

					<el-container>
						<el-header style="text-align: right; font-size: 12px">
							<el-dropdown>
								<i class="el-icon-setting" style="margin-right: 15px"></i>
								<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="save">保存</el-dropdown-item>
								<el-dropdown-item @click.native="remove">清除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<span>保存操作</span>
						</el-header>
						<el-main>
							<el-table :data="resourceList" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" show-overflow-tooltip="true" stripe="true">
								<el-table-column type="selection"></el-table-column>
								<el-table-column prop="resource_name" label="资源名"></el-table-column>
								<el-table-column prop="resource_code" label="资源编号"></el-table-column>
								<el-table-column prop="intro" label="说明"></el-table-column>
							</el-table>
							<!--  分页  -->
							<div class="page-box">
								<el-pagination background
									layout="total, prev, pager, next, sizes, jumper" 
									:current-page.sync="p.page" 
									:page-size.sync="p.page_size" 
									:total="total" 
									:page-sizes="[20]" 
									@current-change="f5()" 
									@size-change="f5()">
								</el-pagination>
							</div>
						</el-main>
					</el-container>
				</el-container>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, // 超级对象
					id: sa.p('id', 0),
					p: {// 查询参数
						page: 1,
						page_size: 20,
						menu_id: -1,
					},
					menuList: [],
					dataList: [],
					resourceList: [],
					roleResourceList: [], // 角色已拥有的资源列表
					total: 0,
					provalue: 0, // 赋值操作
				},
				methods: {
					// 刷新
					f5: function(){
						// 获取菜单
						sa.ajax(router.getResMenuTree, {role_id: this.id}, function(res){
							this.menuList = res;
						}.bind(this), {type:'get'});
						// 获取角色已选择的资源
						sa.ajax(router.getRoleResource, {role_id: this.id}, function(res){
							this.roleResourceList = res;
						}.bind(this), {type:'get'});
					},
					select: function(menu_id) {
						this.p.menu_id = menu_id;
						if(this.p.menu_id > 0) {
							sa.ajax(router.getResourceList, this.p, function(res){
								this.resourceList = res.list;
								this.total = res.total;
								this.doSelect(this.resourceList);
							}.bind(this), {type:'get'});
						}
					},
					handleSelectionChange: function(data) {

					},
					handleSelectAll: function(selection) {
						if(selection.length) {
							selection.forEach(row => {
								if(this.roleResourceList.indexOf(row['resource_id']) == -1) {
									this.roleResourceList.push(row['resource_id']);
								}
							});
						} else {
							this.resourceList.forEach(row => {
								if(this.roleResourceList.indexOf(row['resource_id']) > -1) {
									this.roleResourceList.splice(row['resource_id']);
								}
							});
						}
					},
					handleSelect: function(selection, row) {
						let selected = selection.length && selection.indexOf(row) > -1;
						if(selected) {
							if(this.roleResourceList.indexOf(row['resource_id']) == -1) {
								this.roleResourceList.push(row['resource_id']);
							}
						} else {
							if(this.roleResourceList.indexOf(row['resource_id']) > -1) {
								this.roleResourceList.splice(row['resource_id']);
							}
						}
					},
					doSelect: function(data) {
						this.$nextTick(() => {
							data.forEach(row => {
								if(this.roleResourceList.find(id=>id==row['resource_id'])) {
									this.$refs.multipleTable.toggleRowSelection(row, true);
								}
							});
						});
						console.log(this.roleResourceList);
					},
					save: function() {
						sa.ajax(router.updateRoleResource, {role_id: this.id, resource_id: this.roleResourceList}, function(res){

						}.bind(this));
					},
					remove: function() {
						this.roleResourceList = [];
					}
				},
				created: function(){
					this.f5();
					sa.onInputEnter();// 监听输入框的回车事件，执行查询
				}
			});
		</script>
	</body>
</html>